<template>
  <el-dialog
    v-model="dialogVisible"
    title="使用条款"
    width="65%"
    class="agreement-dialog"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    :show-close="true"
    :modal-class="'agreement-modal'"
  >
    <template #header>
      <div
        class="dialog-header flex items-center justify-between pb-4 border-b border-gray-200 dark:border-gray-700"
      >
        <div class="flex items-center space-x-4">
          <div class="icon-wrapper">
            <i class="fas fa-file-alt text-blue-600 dark:text-blue-400"></i>
          </div>
          <div>
            <h2 class="text-xl font-semibold text-gray-900 dark:text-white">
              使用条款
            </h2>
            <p class="text-sm text-gray-500 dark:text-gray-400">
              最后更新日期：2024年3月1日
            </p>
          </div>
        </div>
        <div class="flex items-center space-x-2">
          <el-tooltip content="放大文字" placement="top">
            <el-button circle @click="increaseFontSize">
              <i class="fas fa-search-plus"></i>
            </el-button>
          </el-tooltip>
          <el-tooltip content="缩小文字" placement="top">
            <el-button circle @click="decreaseFontSize">
              <i class="fas fa-search-minus"></i>
            </el-button>
          </el-tooltip>
        </div>
      </div>
    </template>

    <div class="agreement-wrapper">
      <div class="flex">
        <!-- 左侧目录导航 -->
        <div
          class="agreement-nav w-64 flex-shrink-0 p-4 border-r border-gray-200 dark:border-gray-700"
        >
          <h3 class="text-lg font-semibold mb-3">目录</h3>
          <ul class="space-y-2">
            <li
              v-for="(section, index) in termsContent.sections"
              :key="index"
              class="text-blue-600 dark:text-blue-400 hover:text-blue-800 dark:hover:text-blue-300 cursor-pointer"
              :class="{
                'text-primary-600 font-medium': currentSection === section.id,
              }"
              @click="scrollToSection(section.id)"
            >
              {{ section.title }}
            </li>
          </ul>
        </div>

        <!-- 右侧内容 -->
        <div
          class="agreement-content flex-1 prose dark:prose-invert max-w-none"
          :style="{ fontSize: fontSize + 'px' }"
          @scroll="handleScroll"
        >
          <template
            v-for="(section, index) in termsContent.sections"
            :key="index"
          >
            <div :id="section.id" class="scroll-mt-4">
              <h3 class="text-xl font-semibold mt-6 mb-4">
                {{ section.title }}
              </h3>
              <div
                v-for="(content, cIndex) in section.content"
                :key="cIndex"
                class="mb-4"
              >
                <p
                  v-if="typeof content === 'string'"
                  class="text-gray-700 dark:text-gray-300"
                >
                  {{ content }}
                </p>
                <ul
                  v-else-if="Array.isArray(content)"
                  class="list-disc pl-6 space-y-2"
                >
                  <li
                    v-for="(item, iIndex) in content"
                    :key="iIndex"
                    class="text-gray-700 dark:text-gray-300"
                  >
                    {{ item }}
                  </li>
                </ul>
              </div>
            </div>
          </template>
        </div>
      </div>
    </div>

    <template #footer>
      <div class="dialog-footer flex justify-end">
        <el-button type="primary" @click="dialogVisible = false">
          我知道了
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref, computed } from "vue";

const props = defineProps({
  modelValue: Boolean,
});

const emit = defineEmits(["update:modelValue"]);

const dialogVisible = computed({
  get: () => props.modelValue,
  set: (value) => emit("update:modelValue", value),
});

// 状态控制
const fontSize = ref(14);
const currentSection = ref("");

// 使用条款内容
const termsContent = {
  sections: [
    {
      id: "acceptance",
      title: "一、条款接受",
      content: [
        '欢迎使用贵港文旅+平台（以下简称"平台"）。请您仔细阅读以下条款，使用我们的服务即表示您同意接受这些条款。',
        [
          "本条款构成您与平台之间的完整协议",
          "我们保留随时修改条款的权利",
          "继续使用服务表示您接受修改后的条款",
          "如果您不同意这些条款，请停止使用我们的服务",
        ],
      ],
    },
    {
      id: "service",
      title: "二、服务说明",
      content: [
        "2.1 服务内容：",
        [
          "景点预订服务",
          "文创商品购买",
          "导游预约服务",
          "旅游资讯服务",
          "用户评价与互动",
        ],
        "2.2 服务变更：",
        [
          "我们保留随时修改或终止服务的权利",
          "我们会尽可能提前通知服务变更信息",
          "服务变更不承担任何赔偿责任",
        ],
      ],
    },
    {
      id: "account",
      title: "三、账户管理",
      content: [
        "3.1 账户注册：",
        [
          "您需要提供真实、准确的个人信息",
          "您必须保护好账户密码",
          "未经允许不得转让账户",
          "不得创建虚假账户或冒充他人",
        ],
        "3.2 账户安全：",
        [
          "您对账户的所有活动负责",
          "发现账户异常请立即联系我们",
          "我们有权封禁违规账户",
        ],
      ],
    },
    {
      id: "user-conduct",
      title: "四、用户行为规范",
      content: [
        "4.1 禁止行为：",
        [
          "发布虚假或误导性信息",
          "侵犯他人知识产权",
          "从事违法或不当行为",
          "干扰平台正常运营",
          "骚扰其他用户",
        ],
        "4.2 内容规范：",
        ["发布内容必须真实准确", "不得发布违法或有害信息", "尊重他人权益"],
      ],
    },
    {
      id: "intellectual-property",
      title: "五、知识产权",
      content: [
        "5.1 平台内容：",
        [
          "平台的所有内容均受知识产权保护",
          "未经许可不得复制或传播平台内容",
          "用户上传内容的权利归属按法律规定执行",
        ],
        "5.2 授权范围：",
        [
          "用户授权平台使用其上传的内容",
          "平台有权对违规内容进行处理",
          "尊重他人知识产权",
        ],
      ],
    },
    {
      id: "liability",
      title: "六、免责声明",
      content: [
        "6.1 服务保证：",
        [
          "我们努力提供安全、稳定的服务",
          "但不对服务的及时性、安全性、准确性作出绝对保证",
          "因不可抗力导致的服务中断不承担责任",
        ],
        "6.2 用户责任：",
        [
          "用户对自己的行为负责",
          "因用户违规造成的损失由用户承担",
          "平台不对用户间纠纷承担责任",
        ],
      ],
    },
  ],
};

// 字体大小调整
const increaseFontSize = () => {
  if (fontSize.value < 18) {
    fontSize.value += 1;
  }
};

const decreaseFontSize = () => {
  if (fontSize.value > 12) {
    fontSize.value -= 1;
  }
};

// 滚动到指定章节
const scrollToSection = (sectionId) => {
  const element = document.getElementById(sectionId);
  if (element) {
    element.scrollIntoView({ behavior: "smooth" });
    currentSection.value = sectionId;
  }
};

// 监听滚动位置
const handleScroll = (e) => {
  const container = e.target;
  const sections = termsContent.sections;

  for (let i = sections.length - 1; i >= 0; i--) {
    const element = document.getElementById(sections[i].id);
    if (element) {
      const rect = element.getBoundingClientRect();
      if (rect.top <= 100) {
        currentSection.value = sections[i].id;
        break;
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.agreement-dialog {
  :deep(.el-overlay) {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    overflow: hidden;
    height: 100%;
  }

  :deep(.el-dialog) {
    @apply max-w-5xl;
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    margin: 0 !important;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
  }

  :deep(.el-dialog__header) {
    padding: 20px 20px 0;
    margin: 0;
  }

  :deep(.el-dialog__body) {
    flex: 1;
    margin: 0;
    padding: 20px;
    overflow: hidden;
  }

  :deep(.el-dialog__footer) {
    padding: 20px;
    margin: 0;
    border-top: 1px solid #e4e7ed;
  }

  .agreement-wrapper {
    height: 100%;
    min-height: 300px;
    position: relative;

    .agreement-nav {
      background-color: #f8fafc;
      @apply dark:bg-gray-800;

      ul li {
        @apply px-3 py-2 rounded-lg transition-colors duration-200;

        &:hover {
          @apply bg-gray-100 dark:bg-gray-700;
        }

        &.active {
          @apply bg-primary-50 dark:bg-primary-900/30 text-primary-600 dark:text-primary-400;
        }
      }
    }
  }

  .agreement-content {
    height: 50vh;
    overflow-y: auto;
    padding: 0 20px;

    &::-webkit-scrollbar {
      width: 6px;
    }

    &::-webkit-scrollbar-track {
      background: #f1f1f1;
      border-radius: 3px;
    }

    &::-webkit-scrollbar-thumb {
      background: #888;
      border-radius: 3px;

      &:hover {
        background: #555;
      }
    }
  }

  .icon-wrapper {
    @apply w-10 h-10 rounded-full bg-blue-100 dark:bg-blue-900/30 flex items-center justify-center;

    i {
      @apply text-xl;
    }
  }
}

:deep(.agreement-modal) {
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>
